<template>
    <div>
        <!-- 添加职位信息 -->
        <el-input
            size="small"
            class="addPositionInput"
            placeholder="请输入需要添加的职位..."
            suffix-icon="el-icon-plus"
            clearable
            @keydown.enter.native="addPosition"
            v-model="position.name"
        >
        </el-input>
        <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="addPosition"
            >添加</el-button
        >
        <el-button
            type="danger"
            size="small"
            :disabled="multipleSelection.length == 0"
            @click="deleteMorePosition"
            >批量删除</el-button
        >

        <!-- 表格信息 -->
        <el-table
            :data="positions"
            stripe
            style="width: 100%"
            border
            fit
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column>
            <el-table-column prop="id" label="编号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="name" label="职位" align="center">
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit">{{ scope.row.name }}</span>
                    <el-input
                        v-else
                        v-model="updatePosition.name"
                        size="small"
                        autofocus
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column
                prop="createDate"
                label="创建时间"
                width="200"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="enabled"
                label="是否启用"
                width="150"
                align="center"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled == 1" type="success">启用</el-tag>
                    <el-tag v-else type="danger">未启用</el-tag>
                    
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <div v-if="!scope.row.edit">
                        <el-button
                            size="mini"
                            type="warning"
                            @click="editHandle(scope.$index, scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="deleteHandle(scope.$index, scope.row)"
                            >删除</el-button
                        >
                    </div>
                    <div v-else>
                        <el-button
                            size="mini"
                            type="success"
                            @click="saveHandle(scope.$index, scope.row)"
                            >保存</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="cancelHandle(scope.$index, scope.row)"
                            >取消</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 添加职位
            position: {
                name: "",
            },
            // 职位数据
            positions: [],
            // 编辑职位
            updatePosition: {
                id: "",
                name: "",
            },
            // 表格选择之后的数据
            multipleSelection: [],
            // 是否编辑上锁
            lock: false,
        };
    },
    created() {
        // 初始化表格
        this.initPosition();
    },
    methods: {
        // 获取表格数据
        initPosition() {
            this.getRequest("/system/config/position/getAllPositions").then(
                (res) => {
                    if (res) {
                        let list = res;
                        // 判断是否有数据，如果有数据，则遍历当前所有数据，在每一个对象中添加一个属性edit作为编辑的标记
                        if (list) {
                            list.forEach((item, index) => {
                                item["edit"] = false;
                            });
                        }
                        this.positions = list;
                    }
                }
            );
        },
        // 添加职位信息
        addPosition() {
            if (this.lock) {
                return this.$message.warning("操作失败，请先保存之后重试");
            }

            if (!this.position.name) {
                return this.$message.error("职位名称不能为空");
            }
            this.postRequest(
                "/system/config/position/addPosition",
                this.position
            ).then((res) => {
                if (res) {
                    this.position.name = "";
                    this.initPosition();
                }
            });
        },
        // 删除职位
        deleteHandle(index, row) {
            if (this.lock) {
                return this.$message.warning("操作失败，请先保存之后重试");
            }

            this.$confirm(
                "此操作将永久删除【" + row.name + "】职位, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    // 调用删除接口
                    this.deleteRequest(
                        "/system/config/position/deletePosition/" + row.id
                    ).then((res) => {
                        if (res) {
                            this.initPosition();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 编辑事件
        editHandle(index, row) {
            if (this.lock) {
                return this.$message.warning("操作失败，请先保存之后重试");
            }
            // 上锁
            this.lock = true;
            // 将编辑输入框在当前行弹出
            this.updatePosition = row;
            row.edit = true;
        },
        // 保存
        saveHandle(index, row) {
            if (!this.updatePosition.name) {
                return this.$message.error("需要修改的职位不能为空");
            }
            this.updatePosition.createDate = null;
            this.putRequest(
                "/system/config/position/updatePosition",
                this.updatePosition
            ).then((res) => {
                if (res) {
                    row.edit = false;
                    // 取消上锁
                    this.lock = false;
                    this.updatePosition = null;
                    this.initPosition();
                }
            });
        },
        // 取消
        cancelHandle(index, row) {
            row.edit = false;
            this.updatePosition = null;
            this.lock = false;
            this.$message.info("已取消该编辑操作");
            // 如果记录条数少的话，刷新表格数据，如果数据量大的话，不刷新，提高性能
            if (this.positions.length < 50) {
                this.initPosition();
            }
        },
        handleSelectionChange(value) {
            this.multipleSelection = value;
        },
        // 批量删除
        deleteMorePosition() {
            this.$confirm(
                "此操作将永久删除【" +
                    this.multipleSelection.length +
                    "】条职位信息, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    let ids = "?";
                    this.multipleSelection.forEach((item, index) => {
                        ids += "ids=" + item.id;
                        // 判断当前选择的是否是最后一个
                        if (index != this.multipleSelection.length - 1) {
                            ids += "&";
                        }
                    });
                    // 调用删除接口
                    this.deleteRequest(
                        "/system/config/position/deletePositionsByIds" + ids
                    ).then((res) => {
                        if (res) {
                            this.initPosition();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.addPositionInput {
    width: 300px;
    margin-right: 10px;
}
.el-table {
    margin-top: 15px;
}
</style>